<script setup>
defineProps({
  card: {
    required: true,
    type: Object
  }
})
</script>
<template>
  <el-card class="data-card" shadow="hover">
    <template #header>
      <div class="header">
        <div class="title">
          <el-icon><component :is="card.icon" /></el-icon>
          <span style="margin-left: 5px">{{ card.title }}</span>
        </div>
        <div class="tag">
          <el-tag :type="card.tag_type">{{ card.tag_name }}</el-tag>
        </div>
      </div>
    </template>
    <slot></slot>
  </el-card>
</template>

<style lang="scss" scoped>
.data-card {
  box-sizing: border-box;
  display: flex !important;
  flex-direction: column !important;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title {
      color: #606266;
      display: flex;
      align-items: center;
    }
  }
}
</style>
